<template>
  <div class="container clearfix">
    <div class="search-bar">
      <div class="search-box">
        <div class="inp-box">
          <input type="search"
                 @confirm="search"
                 confirm-type="search"
                 class="inp"
                 v-model="search_content"
                 focus="isFocus"
                 placeholder="请输入搜索内容"
                 v-if="!isWords" />
          <input type="search"
                 @confirm="search"
                 confirm-type="search"
                 class="inp"
                 placeholder="请输入搜索内容"
                 v-model="search_content"
                 v-if="isWords" />
          <img mode="widthFix"
               src="https://h5.ameimeika.com/mp_images/shouye/search@2x.png"
               alt
               class="image" />
          <span class="del"
                @click.stop="delInput">×</span>
        </div>
      </div>
      <div class="btn"
           @click="search">搜索</div>
    </div>
    <ul class="nav"
        v-if="goods_list.length > 0">
      <li class="nav_item"
          @click="hotBtn"
          :class="mark1?'':'red'">销量</li>
      <li class="nav_item"
          @click="scoreBtn"
          :class="mark2?'':'red'">人气</li>
      <li class="nav_item"
          @click="priceBtn"
          :class="mark3?'':'red'">
        价格
        <span v-if="mark3">
          <img :src="ImgBaseUrl + 'shang-hui@2x.png'"
               class="nav_up" />
          <img :src="ImgBaseUrl + 'xia-hui@2x.png'"
               class="nav_down" />
        </span>
        <span v-if="ishow3">
          <img :src="ImgBaseUrl + 'shang-hong@2x.png'"
               class="nav_up" />
          <img :src="ImgBaseUrl + 'xia-hui@2x.png'"
               class="nav_down" />
        </span>
        <span v-if="ishidden3">
          <img :src="ImgBaseUrl + 'shang-hui@2x.png'"
               class="nav_up" />
          <img :src="ImgBaseUrl + 'xia-hong@2x.png'"
               class="nav_down" />
        </span>
      </li>
    </ul>
    <div class="content"
         :class="total > 0 ?'content-style':''">
      <div class="result">
        <div class="empty"
             v-if="isempty">
          <img src="https://h5.ameimeika.com/mp_images/shouye/sousuowujieguo@2x.png"
               alt
               class="nothing" />
          <div class="text">没有找到宝宝想看的内容 要不换个词儿再搜搜</div>
        </div>
        <!-- <div v-if="type==1 && mallList.length > 0"
             style="height:100%">
          <scroll-view :scroll-y="true"
                       :style="{'height': '100%'}"
                       @scrolltolower="infiniteScroll">
            <mallList :mallList="mallList"></mallList>
          </scroll-view>
        </div>-->
        <ul class="list-goods clearfix"
            v-if="type==2 && goods_list.length > 0">
          <scroll-view :scroll-y="true"
                       :style="{'height': '100%','width':'100%'}"
                       @scrolltolower="infiniteScroll">
            <li class="goods-item"
                v-for="(item, index) in goods_list"
                :key="index">
              <a :href="'/pages/package_mall/goods_detail/main?goods_id='+item.id">
                <div class="image-box">
                  <div class="mallImg_top"
                       v-if="item.tag_name && item.tag_name!== null">{{item.tag_name}}</div>
                  <img :src="imgUrl+item.thumb_image"
                       alt
                       class="image" />
                </div>
                <div class="title">
                  <span v-if="item.cross_border == 1"
                        class="icon"></span>
                  {{item.title}}
                </div>
                <div class="price"
                     v-if="item.price_flag!=2">
                  ￥
                  <div class="num">{{item.price}}</div>
                  <div class="sale-num">销量{{item.sales_num}}</div>
                </div>
                <div class="is_activity"
                     v-if="item.activity_status !== 3">{{item.activity_status==2?'抢购中':'即将开抢'}}</div>
              </a>
            </li>
            <p class="bottomtext"
               v-if="isbottom">因为甄选，所以珍稀</p>
          </scroll-view>
        </ul>
        <div class="searchDV"
             v-if="searchHistory">
          <p class="search_title">
            搜索历史
            <img src="https://h5.ameimeika.com/mp_images/mp_2.0/shouye/qingchu@2x.png"
                 class="delIcon"
                 @click="del" />
          </p>
          <ul class="searchHistory"
              v-if="search_content_array1.length > 0 && type==1">
            <li class="searchHistory_item"
                v-for="(item,index) in search_content_array1"
                :key="index"
                @click="clickSearchContent(item)">{{item}}</li>
          </ul>
          <ul class="searchHistory"
              v-if="search_content_array2.length > 0 && type==2">
            <li class="searchHistory_item"
                v-for="(item,index) in search_content_array2"
                :key="index"
                @click="clickSearchContent(item)">{{item}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import mallList from "@/components/mall_List/mall_List";
import imageurl from "@/assets/js/image.js";
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      mark1: true,
      mark2: true,
      mark3: true,
      ishow3: false,
      ishidden3: false,
      hot: 2, //销量
      price: "", //价格
      star: 2, //人气
      imgUrl: imageurl,
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      search_content: "",
      type: 2,
      longitude: "",
      latitude: "",
      page: 1,
      total: "",
      // mallList: [],
      goods_list: [],
      isbottom: false,
      isempty: false,
      isFocus: true,
      province: 13,
      searchHistory: false,
      search_content_array1: [],
      search_content_array2: [], //搜索框是否显示,
      isWords: ""
    };
  },
  // components: {
  //   mallList
  // },
  methods: {
    search (e) {
      this.isbottom = false;
      if (this.search_content == "") {
        return false;
      }
      if (
        //判断是否搜索过此关键字（商品）
        this.search_content_array2.indexOf(this.search_content) == -1 &&
        this.type == 2 //商品
      ) {
        if (this.search_content_array2.length >= 10) {
          this.search_content_array2.splice(0, 1);
        }
        this.search_content_array2.push(this.search_content);
        wx.setStorageSync("searchHistory2", this.search_content_array2);
      }
      common.mmk_Loading(0);
      this.searchHistory = false;
      let obj;
      let api = "api/v4_2/shop_goods/index";
      this.page = 1;
      obj = {
        page: this.page,
        pageSize: 10,
        lat: this.latitude,
        lng: this.longitude,
        province_id: this.province,
        keyword: this.search_content,
        price_sort: this.price,
        user_id: wx.getStorageSync('user_id') || 0
      };
      let that = this;
      common.fly_post(api, obj, msg => {
        common.mmk_Loading(1);
        let res = msg.data;
        if (res.status_code == 0) {
          if (res.data.data.length == 0) {
            this.goods_list = [];
            this.isempty = true;
          } else {
            if (this.type == 1) {
              this.total = res.data.total;
            } else {
              this.goods_list = res.data.data;
              this.total = res.data.total;
            }
            this.isempty = false;
            this.total = res.data.last_page;
          }
        } else {
          common.mmk_Loading(2, res.message);
          return false;
        }
      });
    },
    clickSearchContent (item) {
      this.search_content = item;
      setTimeout(() => {
        this.search(this.search_content);
      }, 1000);
    },
    get_position () {
      let that = this;
      wx.getLocation({
        type: "gcj02",
        success (res) {
          that.longitude = res.longitude; // 经度，浮点数，范围为-180~180，负数表示西经
          that.latitude = res.latitude; // 纬度，浮点数，范围为-90~90，负数表示南纬
          that.search();
        },
        fail () {
          wx.showToast({
            title: "获取地理位置失败",
            icon: "none",
            duration: 2000,
            mask: true
          });
          that.search();
        }
      });
    },
    infiniteScroll () {
      if (this.isbottom) {
        return false;
      }
      if (this.total > 1) {
        this.page++;
        wx.showLoading({
          title: "搜索中...", //提示的内容,
          mask: true //显示透明蒙层，防止触摸穿透
        });
        common.fly_post(
          "api/v4_2/shop_goods/index",
          {
            keyword: this.search_content,
            page: this.page,
            pageSize: 10,
            lng: this.longitude,
            lat: this.latitude,
            province_id: this.province,
            user_id: wx.getStorageSync('user_id') || 0
          },
          result => {
            common.mmk_Loading(1);
            let res = result.data;
            if (res.status_code == 0) {
              if (res.data.data.length == 0 && this.page > 1) {
                // common.mmk_Loading(2, '已经没有更多了')
                this.isbottom = true;
              } else {
                this.isempty = false;
                this.searchHistory = false;
                // this.mallList.push(...res.data.data);
                this.goods_list.push(...res.data.data);
              }
            } else {
              common.mmk_Loading(2, res.message);
            }
          }
        );
      }
    },
    del () {
      if (this.type == 2) {
        wx.removeStorageSync("searchHistory2");
        this.search_content_array2 = [];
      }
    },
    hotBtn () {
      this.isbottom = false;
      this.mark2 = true;
      this.mark3 = true;
      this.ishow3 = false;
      this.ishidden3 = false;
      // 取反
      this.mark1 = false;
      this.hot = 2;
      this.star = "";
      this.price = "";
      this.pageNum = 1;
      this.getData(this.hot);
    },
    scoreBtn () {
      this.isbottom = false;
      this.mark1 = true;
      this.mark3 = true;
      this.ishow3 = false;
      this.ishidden3 = false;
      // 取反
      this.mark2 = false;
      this.star = 2;
      this.hot = "";
      this.price = "";
      this.pageNum = 1;
      this.getData(this.hot);
    },
    priceBtn () {
      this.isbottom = false;
      this.mark1 = true;
      this.ishow1 = false;
      this.ishidden1 = false;
      this.mark2 = true;
      this.ishow2 = false;
      this.ishidden2 = false;
      // 取反
      this.mark3 = false;
      this.ishow3 = !this.ishow3;
      this.ishidden3 = !this.ishow3;
      if (this.ishow3) {
        this.price = 2;
      } else if (this.ishow3 == false) {
        this.price = 1;
      }
      this.hot = "";
      this.star = "";
      this.pageNum = 1;
      this.getData(this.price);
    },
    getData (e) {
      if (this.isbottom) {
        return false;
      }
      common.mmk_Loading(0);
      let obj = {
        page: this.pageNum,
        pageSize: 10,
        lat: this.latitude,
        lng: this.longitude,
        is_dashboard: 0,
        province_id: this.province,
        keyword: this.search_content
      };
      if (!this.hot == "") {
        obj.sales_sort = this.hot;
      } else if (!this.star == "") {
        obj.star_sort = this.star;
      } else if (!this.price == "") {
        obj.price_sort = this.price;
      }
      let api;
       if (this.type == 2) {
        api = "api/v4_2/shop_goods/index";
      }
      let that = this;
      setTimeout(() => {
        common.fly_post(api, obj, msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          if (res.status_code == 0) {
            if (res.data.data.length == 0 && this.pageNum > 1) {
              common.mmk_Loading(2, "已经到最底下了");
              this.isbottom = true;
              return false;
            }
            if (res.data.data.length > 0 && this.pageNum == 1) {
              // this.mallList = res.data.data;
              this.goods_list = res.data.data;
            } else {
              // this.mallList.push(...res.data.data);
              this.goods_list.push(...res.data.data);
            }
          } else {
            common.mmk_Loading(2, res.message);
            return false;
          }
        });
      }, 200);
    },
    delInput () {
      this.search_content = "";
    }
  },
  onLoad (options) {
    wx.setNavigationBarTitle({
      title: "搜索"
    });
    Object.assign(this.$data, this.$options.data());
    if (options.type) {
      //区分项目还是商品
      this.type = options.type;
    }
    if (wx.getStorageSync("user_data").province) {
      this.province = wx.getStorageSync("user_data").province;
      this.get_position();
    } else {
      // this.get_position();
      this.search();
    }
    if (options.words) {
      //从广告位跳转过来的关键字搜索
      this.isWords = options.words; //有关键字不弹键盘
      this.search_content = options.words;
      this.get_position();
    }
    if (wx.getStorageSync("searchHistory2")) {
      this.searchHistory = true;
      this.search_content_array2 = wx.getStorageSync("searchHistory2");
    }
  },
  onShow () {
    // this.get_position();
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f3f4f6;
  display: flex;
  flex-direction: column;
  position: relative;
  .nav {
    width: 100%;
    height: 40px;
    position: relative;
    background-color: #fff;
    margin-top: 11.5%;
    &::before,
    &::after {
      content: "";
      width: 100%;
      height: 0.5px;
      background-color: #f3f4f6;
      position: absolute;
      left: 0;
    }
    &::nav::before {
      top: 0;
    }
    &.nav::after {
      bottom: 0.1%;
    }
    .nav_item {
      width: 31.3%;
      text-align: center;
      line-height: 37px;
      font-size: 14px;
      color: #666;
      float: left;
      position: relative;
      &.red {
        color: #ff383e;
        position: relative;
        &::before {
          content: "";
          width: 25%;
          height: 2px;
          background: #f64665;
          border-radius: 2px;
          position: absolute;
          bottom: -4%;
        }
      }

      .nav_up,
      .nav_down {
        width: 7px;
        height: 4px;
        position: absolute;
        left: 70%;
      }
      .nav_up {
        top: 35%;
      }
      .nav_down {
        bottom: 37%;
      }
    }
    .scroll-view {
      .bg {
        width: 100%;
        text-align: center;
        .bg_img {
          width: 105px;
          height: 105px;
          margin-top: 70px;
        }
      }
    }
  }
  .search-bar {
    width: 100%;
    height: 45px;
    background-color: #fff;
    display: flex;
    box-sizing: border-box;
    // box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    .search-box {
      flex: 1;
      position: relative;
      .inp-box {
        width: 304px;
        height: 32px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        .inp {
          display: block;
          height: 100%;
          line-height: 32px;
          background: rgba(238, 238, 238, 1);
          border-radius: 16px;
          font-size: 14px;
          font-weight: 400;
          padding-left: 40px;
        }
        .image {
          width: 20px;
          position: absolute;
          left: 15px;
          top: 50%;
          transform: translateY(-50%);
        }
        .del {
          width: 13px;
          height: 13px;
          border-radius: 50%;
          line-height: 13px;
          text-align: center;
          background: rgba(198, 198, 198, 1);
          font-size: 14px;
          color: #fff;
          position: absolute;
          top: 29.6%;
          right: 10px;
          z-index: 999;
        }
      }
    }
    .btn {
      height: 100%;
      line-height: 45px;
      width: 56px;
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      color: rgba(68, 68, 68, 1);
    }
  }
  .content {
    width: 100%;
    height: 92%;
    background-color: #f3f4f6;
    position: absolute;
    top: 8%;
    left: 0;
    &.content-style {
      width: 100%;
      height: 92%;
      background-color: #f3f4f6;
      position: absolute;
      top: 8%;
      left: 0;
      top: 14.5%;
      height: 86%;
    }
    .searchDV {
      width: 100%;
      // height: 45px;
      box-sizing: border-box;
      padding: 0 15px;
      .search_title {
        height: 45px;
        position: relative;
        line-height: 45px;
        font-size: 14px;
        color: #666;
        .delIcon {
          width: 16px;
          height: 16px;
          display: block;
          position: absolute;
          right: 0;
          top: 32.2%;
        }
      }
    }
    .searchHistory {
      width: 100%;
      box-sizing: border-box;
      // padding: 0 15px;
      .searchHistory_item {
        max-width: 100%;
        height: 30px;
        box-sizing: border-box;
        padding: 0 10px;
        font-size: 12px;
        color: #666;
        float: left;
        background-color: #e7e7e7;
        line-height: 30px;
        border-radius: 15px;
        margin-right: 10px;
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
    .result {
      position: relative;
      flex: 1;
      box-sizing: border-box;
      overflow: hidden;
      height: 100%;
      .empty {
        width: 154px;
        position: fixed;
        top: 200px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 999;
        .nothing {
          width: 128px;
          height: 114px;
          margin: 0 auto;
          display: block;
        }
        .text {
          width: 100%;
          font-size: 14px;
          font-weight: 400;
          margin-top: 13px;
          color: rgba(153, 153, 153, 1);
          text-align: center;
        }
      }

      .list-goods {
        height: 100%;
        box-sizing: border-box;
        width: 100%;
        padding: 0 10px 0 15px;
        .goods-item {
          width: 170px;
          height: 241px;
          float: left;
          margin: 0 5px 5px 0;
          box-sizing: border-box;
          background-color: #fff;
          border-radius: 4px;
          &.goods-item:nth-of-type(1),
          &.goods-item:nth-of-type(2) {
            margin-top: 8px;
          }
          a {
            width: 100%;
            height: 100%;
            position: relative;
            .image-box {
              width: 170px;
              height: 170px;
              background: rgba(235, 235, 235, 1);
              position: relative;
              .image {
                width: 100%;
                height: 100%;
                display: block;
                margin: 0 auto;
                border-radius: 10px;
              }
              .referenceImg {
                width: 30px;
                height: 30px;
                display: inline-block;
                position: absolute;
                z-index: 999;
                top: 2%;
                left: 2%;
              }
              .mallImg_top {
                min-width: 30px;
                height: 30px;
                position: absolute;
                top: 0;
                left: 0;
                background: url("https://h5.ameimeika.com/mp_images/mp_2.7/icon_intergralmall_list_tag.png")
                  no-repeat;
                background-size: 100% 100%;
                text-align: center;
                color: #fff;
                font-size: 10px;
                font-family: "Medium";
                font-weight: 500;
                line-height: 22px;
              }
            }
            .title {
              height: 40px;
              font-size: 14px;
              font-family: "Medium";
              font-weight: 500;
              line-height: 20px;
              color: #333;
              margin: 5px 0 6px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              box-sizing: border-box;
              padding: 0 4px;
              .icon {
                width: 40px;
                height: 14px;
                display: inline-block;
                background: url("https://img.ameimeika.com/h5_images/mp_images/mp_3.0/mall/kuajing.png")
                  no-repeat;
                background-size: 100% 100%;
              }
            }
            .tip {
              font-size: 10px;
              font-weight: 400;
              color: #666;
              margin: 0 5px;
              .old-price {
                font-size: 12px;
                font-weight: 400;
                float: left;
                text-decoration: line-through;
              }
              .sale-num {
                float: right;
              }
            }
            .price {
              margin: 6px 6px 6px 5px;
              width: 100%;
              font-size: 10px;
              line-height: 10px;
              color: #f64665;
              height: 14px;
              .num {
                display: inline-block;
                vertical-align: bottom;
                font-size: 14px;
                font-family: "Medium";
                font-weight: 500;
                line-height: 14px;
              }
              .sale-num {
                display: inline-block;
                font-size: 10px;
                color: #666;
                position: absolute;
                right: 4%;
              }
            }
            .and {
              display: inline-block;
              vertical-align: middle;
              margin: 0 3px;
            }
            .is_activity {
              width: 69px;
              height: 24px;
              background: linear-gradient(
                213deg,
                rgba(255, 134, 105, 1) 0%,
                rgba(254, 106, 156, 1) 100%
              );
              position: absolute;
              top: 57%;
              right: 4%;
              border-radius: 12px;
              color: #fff;
              font-size: 12px;
              line-height: 24px;
              text-align: center;
            }
          }
          .credit-group {
            display: inline-block;
            // vertical-align: bottom;
            font-size: 10px;
            color: #ff7100;
            line-height: 10px;
            margin: 6px 6px 6px 5px;
            height: 14px;
            .num {
              display: inline-block;
              // vertical-align: middle;
              font-size: 14px;
              font-family: "Medium";
              font-weight: 500;
              line-height: 14px;
            }
          }
        }
        .bottomtext {
          width: 340px;
          height: 60px;
          font-size: 12px;
          font-weight: 400;
          color: rgba(153, 153, 144, 1);
          text-align: center;
          line-height: 60px;
          display: inline-block;
        }
      }
    }
  }
}
</style>



